---
title: "OpenSource HTML Dashboard"
author: "Eric Chang"
output:
  flexdashboard::flex_dashboard:
    theme: paper
    source_code: embed
---


```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
library(dplyr)
library(tidyr)
library(DT)
library(plotly)
library(crosstalk)
library(RColorBrewer)
setwd("C:/Users/echan/Documents/Projects/Accion/Scripts/")

```


```{r import, include=FALSE}
library(leaflet)
library(plotly)
eqs <- highlight_key(quakes)
```

Interactives {data-icon="ion-stats-bars"}
=====================================  

Column {data-width=400}
-------------------------------------

### Filters

```{r filters, echo=FALSE, eval=TRUE}
bscols(
  filter_slider(
    id = "mag",
    label = "Magnitude",
    sharedData = eqs,
    column = ~mag,
    step = .1,
    round = TRUE,
    sep = "",
    ticks = FALSE
  ),
  filter_slider(
    id = "stations",
    label = "Stations",
    sharedData = eqs,
    column = ~stations,
    step = 1,
    round = TRUE,
    sep = "",
    ticks = FALSE
  )
)

```

### Datatable

```{r datatable, echo=FALSE, eval=TRUE}
eqs %>%
  datatable(
    filter = "top",  # allows filtering on each column
    extensions = c(
      "Buttons",  # add download buttons, etc
      "Scroller"  # for scrolling down the rows rather than pagination
    ),
    rownames = FALSE,  # remove rownames
    style = "bootstrap",
    class = "compact",
    width = "100%",
    options = list(
      dom = "Blrtip",  # specify content (search box, etc)
      deferRender = TRUE,
      scrollY = 300,
      scroller = TRUE, 
      buttons = list(
        I("colvis"),  # turn columns on and off
        "csv",  # download as .csv
        "excel" # download as .xlsx
        ),
      columnDefs = list(list(defaultContent="", targets = "_all"),
                               list(
                                 targets = c(1,2),
                                 render = JS(
                                   "function(data, type, row, meta) {",
                                   "return type === 'display' && data.length > 1 ?",
                                   "'' + data.substr(0, 1) + '...' : data;",
                                   "}")))
    ),
    colnames = c(
      "Latitude" = "lat",
      "Longitude" = "long",
      "Depth" = "depth",
      "Magnitude" = "mag",
      "Stations" = "stations"
      )
  )
```


Column {data-width=600}
-------------------------------------
    
### Interactive Scatterplot

```{r scatterplot, echo=FALSE, eval=TRUE}
x <- list(
  title = "Depth"
)
y <- list(
  title = "Magnitude"
)

p <- plot_ly(eqs, x = ~depth, y = ~mag,
             text = ~paste('Station: ', stations,
                            '
 Depth: ', depth,
                            '
 Magnitude: ', mag)) %>% 
  add_markers(alpha = 0.5) %>% 
  highlight("plotly_selected") %>% 
  layout(xaxis = x, yaxis = y)

p
```

### Interactive Map

```{r map, echo=FALSE, eval=TRUE}

map <- leaflet(eqs) %>% 
  addTiles() %>% 
  addCircles()

map
```

Information {data-orientation=rows data-icon="fa-info-circle"}
===================================== 


### Description

This is an example of an interactive HTML dashboard I am able to create for clients that does not require any hosting. It is simply a static HTML file and the client only needs a web browser to view the contents. 

> Self-service interactive tools have great power to support decisions by policy-makers. Shiny apps are a natural fit for this, but it's not always easy to share them within the public sector. This is due to issues like a lack of server space, highly sensitive data and users who aren't R-savvy.
>
>This challenge can be overcome with the use of RMarkdown, which is able to generate interactive HTML files that are static. Meaning the user only needs a browser to view the HTML file. Thus completely cutting out the need to install any software to view the contents. The HTML files can also be uploaded onto websites to house reports.
>
>[Joe Cheng's Crosstalk package](http://rstudio.github.io/crosstalk/) overcomes this with shared data objects that react to user inputs, altering the content of multiple widgets on the fly. I'll explain how I used Crosstalk to develop a 'pseudo-app' for exploring seismic activity around Fiji with the [Leaflet](https://rstudio.github.io/leaflet/) (maps), [Plotly](https://plotly-r.com/) (charts) and [DT](https://rstudio.github.io/DT/) (tables) widgets inside the [Flexdashboard](https://rmarkdown.rstudio.com/flexdashboard/) framework and how I make it easily accessible to users as a static HTML file for exploration in the browser.

Note that this data comes from an **R public dataset**.


### How to use

#### Filters

You can:

* Drag the `Magnitude` and `Stations` sliders to filter points on the Scatterplot to the right.

#### Interactive Scatterplot

You can:

* click and drag to box select data points and zoom in.
* Double-click to reset axes.
* More plotly features listed on the top right of the figure.

#### Interactive Map

You can:

* Click to grab and drag the map around
* Zoom with the '+' and '-' buttons (top-left) or with your mouse's scroll wheel
* Box select with button below '+' and '-'. Points selected on the map will also select points on the scatterplot and associated rows in the DataTable.


#### Interactive table

You can:

* filter each column by typing in the boxes under each column header
* sort the columns (ascending and descending) by clicking on the column header
* change which columns are visible by clicking the Column visibility button
* click 'CSV' or 'Excel' to download the filtered data to a .csv file or a .xlsx
* see how many entries remain after filtering in the bottom-left, where it says 'Showing X to Y of Z entries'

### Tools

[R v4.0.5](https://www.r-project.org/) and [RStudio v1.4.1103](https://www.rstudio.com/) were used to build this tool.

The packages used were:

* [Flexdashboard](https://rmarkdown.rstudio.com/flexdashboard/) to create a frame for the content
* [Leaflet](https://rstudio.github.io/leaflet/) for the interactive map
* [DT](https://rstudio.github.io/DT/) for the interactive table
* [Crosstalk](https://rstudio.github.io/crosstalk/) for widget interactivity
* [Plotly](https://plotly-r.com/) graphing library makes interactive, publication-quality graphs
* [datasets](https://rdrr.io/r/datasets/datasets-package.html) dataset of 1000 seismic events that occurred near Fiji since 1964